<template>
  <div class="details">
    <div class="spans border">
      <span v-for="(item, index) of spans1" :key="index">{{ item }}</span>
    </div>
    <div class="spans">
      <span v-for="(item, index) of spans2" :key="index">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    spans1: {
      typeof: Array,
      default: () => ["类目1:", "全部"],
    },
    spans2: {
      typeof: Array,
      default: () => ["类目2:", "全部"],
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.details {
  width: 8.333333rem /* 1600/192 */;
  background: rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  padding: 0 0.130208rem /* 25/192 */;
  text-align: left;
  font-size: 0.072917rem /* 14/192 */;
}
.spans {
  height: 0.260417rem /* 50/192 */;
  line-height: 0.260417rem /* 50/192 */;
}
.border {
  border-bottom: #999ba4 1px dashed;
}

span {
  margin-right: 0.182292rem /* 35/192 */;
}
</style>